<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in 3" :key="i">
				<view class="swiperItem_view">
					{{item}}
				</view>
			</swiper-item>
		</swiper>

		<!-- 商品 -->
		<view class="goods_list_box">
			
			<view class="goods_list" v-for="(item,index) in list" :key="index">
				<view class="goods_item" @click="go_goods_list(item)">
					<text class="goods_item_name">
						{{item.properties_name}}
					</text>
				</view>
			</view>
			


		</view>

	</view>
</template>

<script>
	import  badgeMix from "../../static/mixin/tabbar-badge.js"
	
	export default {
		data() {
			return {
				list: ['1']

			};
		},
			mixins:[badgeMix],
		onShow() {
			this.setBadge()
		},
		onPullDownRefresh(){
			console.log('onPullDownRefresh');
		},
	
		methods: {
			go_goods_list(item){
				// console.log(item);
				// let obj = {
				// 	goods_name:'molu',
				// 	price:13
				// }
				
				uni.navigateTo({
					// url:`../../subpkg/goods_list/goods_list?item=${item.properties_name}`
					url:`../../subpkg/goods_list/goods_list?item=` + JSON.stringify(item)
				})
			}

		},
		async onReachBottom(){
			console.log('onReachButton');
			let {
				data: res
			} = await uni.$http.get('http://localhost:3000/json_data')
			if (res.data.length == 0) {
				return uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
			this.list = [...this.list , ...res.data]
		},
		async onLoad() {


			let {
				data: res
			} = await uni.$http.get('http://localhost:3000/json_data')
			if (res.data.length == 0) {
				return uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
			this.list = res.data

			console.log(res);
		}
	}
</script>

<style lang="scss">
	.goods_list_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around
		
	}

	swiper-item {
		box-sizing: border-box;
		background-color: cadetblue;		
		padding: 15rpx;
		.swiperItem_view {
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}

	.goods_list {
		margin: 10rpx;

		// display: flex;
		// flex-direction: row;
		// flex-wrap: wrap;
		.goods_item {
			width: 300rpx;
			height: 300rpx;
			border: 1px solid rosybrown;
			border-radius: 15rpx;
			font-size: 12px;
			overflow: hidden;

		}
	}
</style>